<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="20" :offset="4"
        ><div class="grid-content bg-purple">
          <el-form ref="form" :model="form" label-width="130px">
            <el-row>
              <el-col :span="18">
                <el-form-item label="有效年龄段:" prop="value">
                  <el-slider
                    v-model="value"
                    range
                    :marks="marks"
                    @change="patrolspeed"
                  >
                  </el-slider>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form></div
      ></el-col> </el-row
    ><el-row :gutter="20">
      <el-col :span="12" :offset="4"
        ><div class="grid-content bg-purple">
          <el-form ref="form" :model="form" label-width="130px">
            <el-row>
              <el-col :span="20">
                <el-form-item label="回访识别:" prop="followUp">
                  <el-switch
                    v-model="form.followUp"
                    active-value="1"
                    inactive-value="0"
                  ></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form></div
      ></el-col> </el-row
    ><el-row :gutter="20">
      <el-col :span="20" :offset="4"
        ><div class="grid-content bg-purple">
          <el-form ref="form" :model="form" label-width="130px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="客流去重:" prop="deduplication">
                  <el-switch
                    v-model="form.deduplication"
                    active-value="1"
                    inactive-value="0"
                    @change="leachIntervalData"
                  ></el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="去重间隔（小时）:" prop="leachInterval">
                  <el-slider
                    :disabled="disabled"
                    v-model="form.leachInterval"
                  ></el-slider>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form></div
      ></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="4"
        ><div class="grid-content bg-purple">
          <el-form ref="form" :model="form" label-width="130px">
            <el-row>
              <el-col :span="20">
                <el-form-item label="外卖员过滤:" prop="deliveryStaff">
                  <el-switch
                    v-model="form.deliveryStaff"
                    active-value="1"
                    inactive-value="0"
                  ></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form></div
      ></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="4"
        ><div class="grid-content bg-purple">
          <el-form ref="form" :model="form" label-width="130px">
            <el-row>
              <el-col :span="20">
                <el-form-item label="过点客流计算方法:" prop="storePassReckon">
                  <el-radio-group v-model="form.storePassReckon">
                    <el-radio-button :label="0"
                      >数据源不涵盖进场的（进 + 过）</el-radio-button
                    >
                    <el-radio-button :label="1"
                      >数据源涵盖进场的（过）</el-radio-button
                    >
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="15" :offset="4"
        ><div style="display: flex; flex-direction: row-reverse">
          <el-button type="primary" @click="submitForm">保存</el-button>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import {
  getShopPassengerFlow,
  insertShopPassengerFlow,
  updateShopPassengerFlow,
} from "@/api/shop/configuration/passengerFlow.js";

export default {
  data() {
    return {
      // 查询参数
      organId: localStorage.getItem("organId"),
      // 表单参数
      form: {
        followUp: "0",
        storePassReckon: "0",
        startAgeBracket: "",
        endAgeBracket: "",
        deduplication: 0,
        leachInterval: 0,
        deliveryStaff: "0",
      },
      value: [0, 0],
      value1: [0],
      marks: {
        0: "0岁",
        20: "20岁",
        40: "40岁",
        60: "60岁",
        80: "80岁",
        100: "100岁",
      },
      formData: 1,
      disabled: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      const organId = this.organId;
      getShopPassengerFlow(organId).then((response) => {
        if (response.data == null) {
          this.formData = 2;
          this.disabled = true;
          this.reset();
        } else {
          this.formData = 1;
          this.form = response.data;
          if (this.form.deduplication == 0) {
            this.form.leachInterval = 0;
            this.disabled = true;
          } else {
            this.disabled = false;
          }
          this.form.leachInterval = Number(response.data.leachInterval);
        }
        var arr = [];
        arr.push(this.form.startAgeBracket);
        arr.push(this.form.endAgeBracket);
        this.value = arr;
      });
    },
    patrolspeed(e) {
      this.form.startAgeBracket = e[0];
      this.form.endAgeBracket = e[1];
    },
    leachIntervalData() {
      if (this.form.deduplication == 0) {
        this.form.leachInterval = 0;
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    /** 提交按钮 */
    submitForm() {
      console.log(this.form);
      if (this.formData === 2) {
        insertShopPassengerFlow(this.form).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.getList();
        });
      } else {
        updateShopPassengerFlow(this.form).then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.getList();
        });
      }
    },
    // 表单重置
    reset() {
      this.form = {
        organId: localStorage.getItem("organId"),
        followUp: "0",
        storePassReckon: "0",
        startAgeBracket: "",
        endAgeBracket: "",
        deduplication: 0,
        leachInterval: 0,
        deliveryStaff: "0",
      };
    },
  },
};
</script>
